<template>
    <div class="back_contain_n visualImg">
        <div class="box">
            <div class="">
                <div class="topic_ topic_PPP">
                    <div>
                        <i class="iconfont icon-tupian"></i>包装测试文件
                        <span>（图片大小＜1M，最多上传1张，格式为JPG）</span>
                    </div>
                    <div>
                        <span class="zll-botton download" v-if="!isImgSave" @click="isImgSave = true">编辑</span>
                        <span class="zll-botton" v-else @click="saveCheckImage">保存</span>
                    </div>
                </div>
                <div class="img_up">
                    <img-upload limit="1" :checkSize="1" :imgList="bgImages" :edit="isImgSave" :isImgSave="isImgSave"
                        type="bcsm" :isMultiple="true"></img-upload>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import imgUpload from './imgUpload.vue'
    export default {
        components: { imgUpload },
        data() {
            return {
                isImgSave: false,
                bgImages: [],
            };
        },
        mounted() {
            let self = this;
            self.getImagesList();
        },
        methods: {
            getImagesList() {
                let self = this;
                self.bgImages = [];
                self.$http({
                    url: "/jinl/file/queryFileList",
                    method: "post",
                    params: { type: 'bcsm' }
                }).then(resp => {
                    if (resp.success) {
                        for (let data of resp.result) {
                            data.fileCheck = parseInt(data.fileCheck);
                            data.fileBlob = data.fileUrl;
                            data.fileName = data.displayName;
                            self.bgImages.push(data);
                        }
                    }
                });
            },
            saveCheckImage() {
                let params = [];
                for (let i = 0; i < this.bgImages.length; i++) {
                    let obj = { id: this.bgImages[i].id, fileCheck: this.bgImages[i].fileCheck };
                    params.push(obj);
                }
                let self = this;
                self.$http({
                    url: "/jinl/file/updateFileCheckStatus",
                    method: "post",
                    data: JSON.stringify(params),
                    dataType: 'json',
                    contentType: "application/json",
                }).then(resp => {
                    self.$message.success('保存成功');
                    self.isImgSave = false;
                });
            },


        },

    };
</script>

<style lang="scss" scoped>
    .topic_ {
        line-height: 40px;
        margin-top: 15px;

        i {
            margin-right: 10px;
        }

        span {
            color: #918d8d;
        }

        &.topic_PPP {
            display: flex;
            justify-content: space-between;

            .zll-botton {
                color: #fff;
                padding: 7px 15px;
            }
        }
    }

    .img_up {
        height: 100%;
    }

    .mine-add {
        display: flex;
        justify-content: flex-end;
        height: 34px;

        .zll_icons {
            color: #00d1d0;
            font-size: 20px;
        }
    }

    .visualImg {
        .box {
            margin-bottom: 15px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .edit_part {
                width: 60%;
            }

            .btns {
                display: flex;
                margin-top: 20px;

                .zll-botton {
                    width: 90px;
                    font-size: 14px;
                }
            }
        }

        .list {
            border-top: 1px solid #f2f2f2;
            display: flex;
            align-items: center;

            &:nth-child(1) {
                border-top: 0;
            }

            .part2 {
                width: calc(100% - 150px);
                height: 100%;
                display: flex;
                align-items: center;
                padding: 15px 0;
                position: relative;

                p {
                    font-size: 14px;
                }

                ._copy {
                    color: #1890ff;
                    cursor: pointer;
                    font-size: 16px;
                    margin-left: 20px;

                    &:hover {
                        opacity: .7;
                    }
                }
            }

            .part1 {
                width: 150px;
                height: 56px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                &._last {
                    margin: 27px 0;
                }

                .firstTitle {
                    font-size: 14px;
                    text-align: left;
                    padding-left: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin: 0;
                }

                .subTitle {
                    font-size: 12px;
                    padding-left: 20px;
                    color: #999;
                    margin: 5px 0 0 0;
                }
            }
        }
    }

    .tableList {
        margin-top: 20px;
        position: relative;

        table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #e6e6e6;
            text-align: center;
            table-layout: fixed;

            th {
                background: #ddd;
                color: #918d8d;
                padding: 3px;
                font-weight: normal;
                height: 26px;
                line-height: 26px;
            }

            td {
                padding: 3px;
                height: 26px;
                line-height: 26px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                p {
                    padding: 0 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                span {
                    color: #1890ff;
                    cursor: pointer;
                    margin: 0 5px;

                    &:hover {
                        opacity: .8;
                    }
                }
            }

            .noData {
                color: #918d8d;
            }

            tr {
                background: #FAFAFA;
                border: 1px solid #EBEEF5;

                &:nth-of-type(2n) {
                    background: #fff;
                }
            }
        }
    }
</style>